<template>
  <div class="tpl47-hotSale">
    <section
      class="modulePadding"
      :style="`padding-top:${tplItemData.modulePadding || 5}px; padding-bottom:${tplItemData.modulePadding || 5}px;`">
      <div class="hotSale64 clearfix">
        <div class="header_img">
          <img :src="tplItemData.headerpic" alt="">
          <div class="triangle"></div>
        </div>
        <section
          v-if="tplItemData.goodsList && tplItemData.goodsList.length > 0"
          class="m_sliderGoods J_sliderGoods">
          <ul class="clearfix">
            
            <li v-for="(goods,index) in tplItemData.goodsList" :key="index" :class="'list'+tplItemData.goodsList.length">
              <section class="goods_items">
                <a @click="openLink(goods.link)">
                  <img :src="goods.pic+'480x480'" :alt="goods.title" v-if="goods.is_compress==1">
                  <img :src="goods.pic" :alt="goods.title" v-else>
                  <b class="sold-out" v-if="goods.is_sell_out == 1"></b>
                </a>
                <a v-if="goods.is_crowd == 1" href="javascript:;" class="addcart snatch_treasure j-openPopupSKU" data-id="{$goods['item_crowd_id']}" data-type="buy">
                  <i></i>
                </a>
                
                <p class="goods-title" v-if="tplItemData.showName == 1 || tplItemData.showName">
                  <span class="seckill MiaoS" v-if="goods.is_miao==1">秒杀</span>
                  <span class="seckill XianJiZ" v-else-if="goods.discount && goods.discount!=0 && goods.discount!=10 && goods.is_limit_discount">
                    <!-- 限时{{goods.discount}}折 -->
                    <span v-if="goods.discount_sta==1">限时 ¥{{goods.discount}}</span>
                    <span v-else>限时{{ goods.discount }}折</span>
                  </span>
                  <span class="seckill KanJ" v-else-if="goods.is_bargin==1">砍价</span>
                  <span class="seckill ZheK" v-else-if="goods.discount && goods.discount!=0 && goods.discount!=10 ">{{goods.discount}}折</span>
                  <span class="seckill FuGYH" v-else-if="goods.is_repurchase==1">复购优惠</span>
                  <span class="seckill" v-else-if="goods.presale_info==1 && goods.presale_info.deposit_money">预售</span>
                  <span class="seckill" v-else-if="goods.is_buy_gift==1">买赠</span>
                  <span class="seckill Try" v-else-if="goods.is_try==1">试用</span>
                  <span class="seckill ZhouQG" v-else-if="goods.is_cycle==1">周期购</span>
                  {{ goods.title }}
                </p>
                <p class="product_price64">
                  <em :class="tplItemData.priceBold==0 ? 'fwt_normal': ''" class="goods_pirce">&yen;{{ goods.price }}</em>
                </p>
              </section>
            </li>
          </ul>
        </section>
      </div>
    </section>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object
      }
    },
    methods: {
      openLink(link) {
        openPage(link)
      },
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .tpl47-hotSale{
    .hotSale64{
      overflow:hidden;
      border-radius:12px;
      .header_img{
        position:relative;
        padding:30px 0 20px;
        background:#fff;
        img{
          display:block;
          width:100%;
        }
        .triangle{
          position:absolute;
          bottom: 20px;
          left:50%;
          margin-left:-16px;
          width:0;
          height:0;
          border:16px solid transparent;
          border-bottom-color:#fff;
        }
      }
      .m_sliderGoods{
        width: 100%;
        -webkit-overflow-scrolling: touch;
        overflow:hidden;
        white-space: nowrap;
        .seckill {
          display: inline-block;
          color: #fff;
          background: #e4393c;
          padding: 0 4px;
          margin: 4px 6px 0 0;
          font-size: 20px;
          border-radius: 4px;
          line-height: 28px;
        }
        ul {
          overflow-x:auto;
          overflow-y: hidden;
          min-width:100%;
          &::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
          li{
            display: inline-block;
            width: calc((100% - 40px) / 4);
            margin: 0 8px 14px 8px;
            background:#fff;
            &.list1{
              width: calc(100% - 16px);
            }
            &.list2{
              width: calc((100% - 24px) / 2);
            }
            &.list3{
              width: calc((100% - 32px) / 3);
            }
            // height: 100%;
            a{
              display: block;
              position:relative;
              padding-top:100%;
              overflow:hidden;
              &>img{
                position:absolute;
                top: 0;
                left: 0;
              }
            }
            .goods_items{
              position:relative;
              .addcart{
                height: 50px;
                width: 50px;
                position: absolute;
                bottom: 106px;
                right: 6px;
                background: #dd2727;
                border-radius: 50%;
                padding-top: 0px;
                -webkit-border-radius: 50%;
                -webkit-border-radius: 50%;
                i{
                  display: block !important;
                  margin: 10px 0 0 10px;
                  height: 30px;
                  width: 30px;
                  background: url(/PublicMob/images/ico-addcart.png) no-repeat;
                  background-size: 100% 100%;
                }
              }
            }
            .goods-title{
              padding:8px 0 6px;
              color: #333;
              @include lineClamp(24px,39px,2);
              white-space: normal;
              height: 90px;
            }
            .goods_pirce{
              color: #F30B23;
              font-weight: bold;
            }
            .orign_price{
              display: block;
              color: #999;
              font-size: 20px;
            }
          }
        }
      }
    }
    .hotSale64 .m_sliderGoods ul li{
      // .goods-title{
      //   display: -webkit-box;
      //   -webkit-line-clamp: 2;
      //   -webkit-box-orient: vertical;
      //   height: 62px;
      //   color: #333333;
      // }
      .product_price64{
        text-align: left;
        .goods_pirce {
          color: #ec4141;
        }
      }
    }
  }
</style>
